<template>
    <div>
        <template v-if="tableData.length>0">
            <el-table size="small" @select="selectColumn" :data="tableData" style="width: 100%;" height="600px">
                <el-table-column type="selection" width="70">
                </el-table-column>

                <el-table-column :fixed="item.prop == 'status' || item.prop == 'evaluate' ?'right':false"
                    show-overflow-tooltip v-for="(item, index) in column" :key="index" :label="item.label"
                    :prop="item.prop" :width="item.width">

                    <!-- 特殊字段处理 -->
                    <template slot-scope="{row}">
                        <!-- 处理图片数据 -->
                        <div v-if="item.prop === 'img'">
                            <div v-if="row.img === ''" class="el-image__error">
                                <el-image></el-image>
                            </div>
                            <div v-else class="el_image">
                                <el-image :src="row.img"></el-image>
                            </div>
                        </div>
                        <!-- 处理性别 -->
                        <div v-else-if="item.prop == 'sex'">
                            <div>{{ item.sex[row.sex] }}</div>
                        </div>
                        <!-- 角色 -->
                        <!-- <div v-else-if="item.prop == 'role'">
                                <div>{{ item.role[row.role] }}</div>
                                <div>{{ row.role }}</div>
                            </div> -->
                        <!-- 活动相关 -->
                        <div v-else-if="item.prop == 'status'">
                            <el-tag :type="row.status == 1 ? 'success' : 'danger'">
                                {{ row.status == null ? "未通过": item.status[row.status] }}
                            </el-tag>
                            <el-button @click="statusColumn(row)" style="margin: 7px;" type="text"
                                icon="el-icon-edit"></el-button>
                        </div>
                        <div v-else-if="item.prop == 'evaluate'">
                            <el-tag v-if="row.evaluate == '优秀'" type="success">
                                {{ row.evaluate }}
                            </el-tag>
                            <el-tag v-if="row.evaluate == '良好'" type="warning">
                                {{ row.evaluate }}
                            </el-tag>
                            <el-tag v-if="row.evaluate == '较差'" type="danger">
                                {{ row.evaluate }}
                            </el-tag>
                            <el-tag v-if="row.evaluate == '差'" type="danger">
                                {{ row.evaluate }}
                            </el-tag>
                            <el-tag v-if="row.evaluate == null || row.evaluate == ''" type="info">
                                暂未评价
                            </el-tag>
                            <el-button @click="evaluateColumn(row)" style="margin: 7px;" type="text"
                                icon="el-icon-edit"></el-button>
                        </div>
                        <div v-else-if="item.prop == 'opinion'">
                            {{ row.opinion }}
                            <!-- <el-button @click="opinionColumn(row)" style="margin: 7px;" type="text"
                                icon="el-icon-edit"></el-button> -->
                        </div>
                        <!-- 志愿者服务时长 -->
                         <div v-else-if="item.prop == 'serviceDuration'">
                            {{ row.serviceDuration }} 小时
                         </div>
                        <!-- 资讯内容 -->
                        <div v-else-if="item.prop == 'infoContent'">
                            <el-button @click="clickContent(row.infoContent)" type="info" plain
                                size="mini">查看内容</el-button>
                        </div>
                        <!-- 活动详情 -->
                        <div v-else-if="item.prop == 'details'">
                            <el-button @click="handleDetails(row.details)" type="info" plain
                                size="mini">查看内容</el-button>
                        </div>
                        <!-- 时间相关 -->
                        <div v-else-if="item.prop == 'createTime'">
                            {{ customFormatterDataTime(row.createTime) }}
                        </div>
                        <div v-else-if="item.prop == 'updateTime'">
                            {{ customFormatterDataTime(row.updateTime) }}
                        </div>
                        <div v-else-if="item.prop == 'startDate'">
                            {{ row.startDate?customFormatterDataTime(row.startDate):'' }}
                        </div>
                        <div v-else-if="item.prop == 'endDate'">
                            {{ customFormatterDataTime(row.endDate) }}
                        </div>
                        <div v-else-if="item.prop == 'regDate'">
                            {{ customFormatterDataTime(row.regDate) }}
                        </div>
                        <div v-else-if="item.prop == 'publishTime'">
                            <span v-if="row.publishTime">{{ customFormatterDataTime(row.publishTime) }}</span>
                            <span v-else>{{ row.publishTime }}</span>
                        </div>
                        <!-- 其他数据 -->
                        <div v-else>{{ row[item.prop] }}</div>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="{row}">
                        <slot name="operate" :row="row"></slot>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template v-else>
            <el-empty style="width: 100%;"></el-empty>
        </template>
        <!-- {{ column }} -->
    </div>
</template>

<script>
import { customFormatterDataTime } from '@/utils/dateTimeFormatter'
// import { parserString } from '@/utils/parser'
export default {
    name: 'TableComponent',
    props: {
        tableData: {
            type: Array,
            default: () => [],
        },
        column: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            // loading:true,
        }
    },
    mounted() {
        this.checkTableData();
    },
    methods: {
        customFormatterDataTime,
        // parserString,

        checkTableData() {
            setTimeout(() => {
                    // this.loading = false;
            }, 500);
        },
        clickContent(content) {
            // console.log(content);
            this.$emit('getContent', content);
        },
        handleDetails(details) {
            this.$emit('getDetails', details);
        },
        handleSizeChange(val) {
            // console.log(val);
            this.$emit('handleSizeChange', val);
        },
        handleCurrentChange(val) {
            // console.log(val);
            this.$emit('handleCurrentChange', val);
        },
        /**
         * 修改活动发布状态
         */
        statusColumn(row) {
            console.log('changeStatus-->', row);
            this.$emit('statusColumn', row);
        },

        selectColumn(rowObj) {
            console.log('selectColumn-->', rowObj);
            const rowArray = [...rowObj];
            const ids = [];
            rowArray.forEach(item => {
                ids.push(item.id)
            })
            console.log('ids-->', ids);
            this.$emit('columnIds', ids);
        },
        evaluateColumn(row) {
            console.log('evaluateColumn-->', row);
            this.$emit('getEvaluateColumn', row);
        },
        opinionColumn(row) {
            this.$emit('getOpinionColumn', row);
         },
    },
    updated() {
        this.checkTableData();
    }


}
</script>

<style lang="scss" scoped>
// 表格图片
.el-image__error,
.el_image,
img {
    width: 60px;
    height: 60px;
    // border-radius: 50%;
}
</style>